<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="statistics">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="stat-header">
              <span>今日销售额</span>
              <el-tag type="success" effect="plain">+15%</el-tag>
            </div>
          </template>
          <div class="stat-content">
            <h2>¥{{ formatNumber(todayStats.sales) }}</h2>
            <p>昨日：¥{{ formatNumber(todayStats.lastSales) }}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="stat-header">
              <span>今日订单数</span>
              <el-tag type="warning" effect="plain">+8%</el-tag>
            </div>
          </template>
          <div class="stat-content">
            <h2>{{ todayStats.orders }}</h2>
            <p>昨日：{{ todayStats.lastOrders }}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="stat-header">
              <span>库存预警</span>
              <el-tag type="danger" effect="plain">{{ lowStockCount }}个</el-tag>
            </div>
          </template>
          <div class="stat-content">
            <h2>{{ totalStock }}</h2>
            <p>商品总数：{{ totalProducts }}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="stat-header">
              <span>本月采购额</span>
              <el-tag type="info" effect="plain">-5%</el-tag>
            </div>
          </template>
          <div class="stat-content">
            <h2>¥{{ formatNumber(monthStats.purchase) }}</h2>
            <p>上月：¥{{ formatNumber(monthStats.lastPurchase) }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>销售趋势</span>
              <el-radio-group v-model="saleChartType" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-content">
            <v-chart class="chart" :option="saleChartOption" autoresize />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>销售分类占比</span>
            </div>
          </template>
          <div class="chart-content">
            <v-chart class="chart" :option="categoryChartOption" autoresize />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最新动态 -->
    <el-row :gutter="20" class="activities">
      <el-col :span="12">
        <el-card class="full-height">
          <template #header>
            <div class="card-header">
              <span>待处理事项</span>
              <el-button link>查看全部</el-button>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in todoList"
              :key="index"
              :type="item.type"
              :timestamp="item.time"
            >
              {{ item.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="full-height">
          <template #header>
            <div class="card-header">
              <span>库存预警</span>
              <el-button link>查看全部</el-button>
            </div>
          </template>
          <el-table :data="lowStockList" style="width: 100%">
            <el-table-column prop="name" label="商品名称" />
            <el-table-column prop="stock" label="当前库存" width="100">
              <template #default="{ row }">
                <el-tag type="danger">{{ row.stock }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="minStock" label="最低库存" width="100" />
            <el-table-column label="操作" width="100">
              <template #default>
                <el-button link type="primary">补货</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import type { ECOption } from '@/types/echarts'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  LineChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
])

// 统计数据
const todayStats = {
  sales: 25680.50,
  lastSales: 22330.80,
  orders: 156,
  lastOrders: 144
}

const monthStats = {
  purchase: 186500.00,
  lastPurchase: 196300.00
}

const totalStock = 12580
const totalProducts = 386
const lowStockCount = 12

// 销售趋势图表
const saleChartType = ref('week')
const saleChartOption = computed<ECOption>(() => ({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['销售额', '订单数']
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: [
    {
      type: 'value',
      name: '销售额',
      axisLabel: {
        formatter: '¥{value}'
      }
    },
    {
      type: 'value',
      name: '订单数',
      axisLabel: {
        formatter: '{value}'
      }
    }
  ],
  series: [
    {
      name: '销售额',
      type: 'line',
      smooth: true,
      data: [3200, 4500, 5800, 3800, 6200, 7100, 4600]
    },
    {
      name: '订单数',
      type: 'line',
      smooth: true,
      yAxisIndex: 1,
      data: [20, 28, 35, 24, 38, 42, 28]
    }
  ]
}))

// 分类占比图表
const categoryChartOption: ECOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '16',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 35, name: '处方药' },
        { value: 30, name: '非处方药' },
        { value: 20, name: '中药' },
        { value: 15, name: '保健品' }
      ]
    }
  ]
}

// 待处理事项
const todoList = [
  {
    content: '有5个采购订单待审核',
    time: '10:00',
    type: 'warning'
  },
  {
    content: '阿莫西林库存不足，需要补货',
    time: '09:30',
    type: 'danger'
  },
  {
    content: '新增3个供应商信息待确认',
    time: '09:00',
    type: 'primary'
  },
  {
    content: '本月销售报表待生成',
    time: '08:30',
    type: 'info'
  }
]

// 库存预警列表
const lowStockList = [
  {
    name: '阿莫西林胶囊',
    stock: 50,
    minStock: 100
  },
  {
    name: '布洛芬片',
    stock: 30,
    minStock: 80
  },
  {
    name: '感冒灵颗粒',
    stock: 20,
    minStock: 50
  },
  {
    name: '板蓝根颗粒',
    stock: 15,
    minStock: 40
  }
]

// 格式化数字
const formatNumber = (num: number) => {
  return num.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.statistics {
  margin-bottom: 20px;
}

.stat-card {
  height: 100%;
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-content {
  text-align: center;
}

.stat-content h2 {
  font-size: 24px;
  color: #303133;
  margin: 10px 0;
}

.stat-content p {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.charts {
  margin-bottom: 20px;
}

.chart-card {
  height: 100%;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-content {
  height: 300px;
}

.chart {
  height: 100%;
}

.activities {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.full-height {
  height: 100%;
}

:deep(.el-timeline-item__node--primary) {
  background-color: var(--el-color-primary);
}

:deep(.el-timeline-item__node--success) {
  background-color: var(--el-color-success);
}

:deep(.el-timeline-item__node--warning) {
  background-color: var(--el-color-warning);
}

:deep(.el-timeline-item__node--danger) {
  background-color: var(--el-color-danger);
}

:deep(.el-timeline-item__node--info) {
  background-color: var(--el-color-info);
}
</style> 